<template>
  <div>
    <div class="flex-container flex-col">
      <div class="w-75pp mg-1em pd-1em bradius-8px bg-gray1 hand" @click="changeRoute">
        <div class="flex-container">
          <div>
            <el-avatar :size="24" :src="authorAvatar"></el-avatar>
          </div>
          <span class="ml-1em">{{ authorName }}</span>
        </div>
        <div class="mt-1em">{{ content }}</div>
        <div class="mt-1em border-gray4 bradius-8px bg-gray2">
          <div class="card-comment-head flex-container flex-row-between">
            <div class="bg-red4 txt-0_4em pdlr-1em txt-gray-1 border-gray4 bradius-16px">神评</div>
            <div>
              <el-icon :color="'#f5222d'"><pointer /></el-icon>
            </div>
          </div>
          <div class="ml-2em mb-1em txt7 txt-gray-8">优秀的代码千篇一律，恶心的代码升职加薪</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { UserFilled, Pointer, StarFilled } from '@element-plus/icons-vue'

const props = defineProps({
  authorName: {
    type: String
  },
  content: {
    type: String
  },
  authorAvatar: {
    type: String
  }
})

import { useRouter } from 'vue-router'
const router = useRouter()
function changeRoute() {
  router.push('/article-info')
}
</script>

<style scoped>
.card-comment-head {
  margin: 0.25em 1em;
}
</style>
